<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" /> 
  <meta name="Keywords" content="" /> 
  <meta name="description" content="" /> 
  <meta name="viewport" content="width=device-width,initial-scale=1.0" /> 
  <meta content="width=640,target-densitydpi=device-dpi,user-scalable=no" name="viewport" /> 
  <title>神探闯关</title> 
  <link type="text/css" rel="stylesheet" href="css/style.css" /> 
  <script type="text/javascript" src="js/jquery-1.11.2.js"></script> 
<!--     <link type="text/css" rel="stylesheet" href="css/myanimate.css">-->
 </head>
 <body> 
  <div class="warp"> 
   <div class="start_logo"> 
    <img src="images/start_logo.png" /> 
   </div> 
   <div class="center start_1"> 
    <img src="images/start_1.png" /> 
   </div> 
   <p class="center start_1_p">本尼开车一溜烟儿不见了，路上留下五个神秘轮胎</p> 
   <div class="start_road"> 
    <div class="start_car" style="animation-duration: 4s; -webkit-animation-duration: 4s;"> 
     <img src="images/car.png" /> 
    </div> 
    <div class="smart"> 
    </div> 
    <div class="glass" style="animation-duration: 2s; -webkit-animation-duration: 2s;"> 
     <img src="images/glas.png" /> 
    </div> 
    <div class="arrow"> 
     <img src="images/arrow_01.png" class="arrow5" /> 
     <img src="images/arrow_02.png" class="arrow4" /> 
     <img src="images/arrow_03.png" class="arrow3" /> 
     <img src="images/arrow_04.png" class="arrow2" /> 
     <img src="images/arrow_05.png" class="arrow1" /> 
    </div> 
    <div class="text"> 
    </div> 
   </div> 
   <div class="start_btn"> 
    <a href="#"><img src="images/start_btn1.jpg" /></a> 
    <a href="#"><img src="images/start_btn2.jpg" /></a> 
   </div> 
   <p class="start_rule center"><a href="#">游戏规则</a></p> 
  </div> 
     <script type="text/javascript">
        $(window).load(function(){
            $("<link>").attr({ rel: "stylesheet", type: "text/css",href: "css/myanimate.css" }).appendTo("head");      
            $(".smart").animate({width:'650px'},4000);
            setTimeout(function(){
                $(".arrow1").animate({'opacity':'1'},200);
            },4000);
            setTimeout(function(){
                $(".arrow2").animate({'opacity':'1'},200);
            },4100);
            setTimeout(function(){
                $(".arrow3").animate({'opacity':'1'},200);
            },4200);
            setTimeout(function(){
                $(".arrow4").animate({'opacity':'1'},200);
            },4300);
            setTimeout(function(){
                $(".arrow5").animate({'opacity':'1'},200);
            },4400);
            setTimeout(function(){
                $(".text").animate({height:'120px'},1000);
            },4500);
        });
     </script>
 </body>
</html>